<template>
    <el-card>
        <div slot="header">
            <span>商品修改</span>
        </div>
        <!-- 商品名称 -->
        <el-form ref="form" :model="form" label-width="80px" :rules="rules">
            <el-form-item label="商品名称" :label-width="'100px'" prop="name">
                <el-input v-model="form.name"></el-input>
            </el-form-item>
            <!--商品分类  -->
            <el-form-item label="商品分类" :label-width="'100px'">
                <el-select v-model="form.category" placeholder="请选择商品种类">
                    <el-option v-for="(v, i) in categoryList" :label="v" :key="i" :value="v"></el-option>
                </el-select>
            </el-form-item>
            <!-- 商品价格 -->
            <el-form-item label="商品价格" :label-width="'100px'">
                <el-input-number v-model="form.price" :precision="2" :step="1" :min="0"></el-input-number>
            </el-form-item>
            <!--商品图片  -->
            <el-form-item label="商品图片" :label-width="'100px'">
                <el-upload class="avatar-uploader" action="http://sell.h5.itsource.cn:8087/goods/goods_img_upload"
                    :show-file-list="false" :on-success="success" :before-upload="beforeUpload">
                    <img v-if="form.imgUrl" :src="form.imgUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
            <!--商品描述  -->
            <el-form-item label="商品描述" :label-width="'100px'">
                <el-input type="textarea" v-model="form.goodsDesc"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">立即修改</el-button>
            </el-form-item>
        </el-form>
    </el-card>
</template>
<script>
import { categories, goodsEdit } from '@/api/goods.js'
export default {
    data () {
        return {
            categoryList: [],//定义空的类名列表
            //验证规则数据
            rules: {
                name: [
                    { required: true, message: '请输入商品名', trigger: 'blur' },
                    { min: 3, message: '长度在3个字符以上', trigger: 'blur' }
                ]
            },
            //定义表单数据
            form: {
                name: '',
                category: '',
                price: 1,
                goodsDesc: '',
                imgUrl: '',
            }
        }
    },
    async created () {
        let res = await categories()//获取后台商品分类列表
        this.categoryList = res.data

        //将query参数转换成对象后传给form进行数据回填
        this.form = JSON.parse(this.$route.query.row)
    },

    methods: {
        //点击添加时的结果
        onSubmit () {
            this.$refs.form.validate(async valid => {
                if (valid) {
                    let res = await goodsEdit(this.form)
                    if (res.data.code === 0) {
                        this.$router.push('/goods/list')
                    };
                } else {
                    console.log('验证未通过');
                }
            })
        },

        //上传成功后执行的回调函数
        async success (res, file) {
            this.form.imgUrl = res.imgUrl;
        },
        //上传之前执行的函数
        beforeUpload (file) {
            //MIME：文件类型的描述
            let mime = ['image/jpeg', 'image/png', 'image/gif']; //允许上传三种格式的图片
            const isJPG = mime.includes(file.type);
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG、PNG、GIF 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        }

    }
}
</script>

<style lang="less" scoped>
.el-input,
.el-textarea {
    width: 400px;
}

.el-form {
    width: 400px;
}

.avatar-uploader {
    display: inline-block;
}

:deep(.avatar-uploader .el-upload) {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
}

.avatar {
    width: 100px;
    height: 100px;
    display: block;
}
</style>